<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:s="http://jboss.com/products/seam/taglib"
	xmlns:a4j="http://richfaces.org/a4j"
	template="/layout/template.xhtml">

	<ui:define name="pageLayout">
		EDIT content playlist
		<a4j:form>
		<table width="100%">
			<tr>
				<td width="50%" valign="top">
					<a4j:outputPanel id="editContentLeftPanel">
					<ui:decorate template="/layout/boxed.xhtml">
						<ui:param name="title" value="#{messages['playlists.my.add']}" />
						<ui:param name="toplevel" value="true" />
						<ui:param name="bordered" value="true" />
						<h:inputText value="#{editplaylist.contentSearch}" >
							<a4j:support event="onchange" action="#{editplaylist.changeContentSearch}"/>
						</h:inputText>
						<h:dataTable 
							id="contentsList"
							var="item"
							value="#{editplaylist.searchedContents}"
							rowClasses="odd,even">
							
							<h:column>
								<f:facet name="header">
									<h:outputText value="#{messages['contents.my.title']}" />
								</f:facet>
									<ui:decorate template="/layout/displayContent.xhtml">
										<ui:param name="content" value="#{item}" />
									</ui:decorate>	
							</h:column>
							<h:column>
								<f:facet name="header">
									<h:outputText value="#{messages['contents.my.status']}" />
								</f:facet>
									<h:outputText value="#{item.status}" />
							</h:column>
							
							<h:column>
								<f:facet name="header">
									<h:outputText value="#{messages['contents.my.select']}" />
								</f:facet>
									<h:selectBooleanCheckbox value="#{item.select}" >
										<a4j:support event="onchange" action="#{editplaylist.addContentToPLaylist()}"
											reRender="editContentLeftPanel,editContentRightPanel"/>
									</h:selectBooleanCheckbox>
							</h:column>
						</h:dataTable>
					</ui:decorate>	
					</a4j:outputPanel>
				</td>
				<td valign="top">
					<a4j:outputPanel id="editContentRightPanel">
					<ui:decorate template="/layout/boxed.xhtml">
						<ui:param name="title" value="#{messages['playlists.my.playlist.contents']}" />
						<ui:param name="toplevel" value="true" />
						<ui:param name="bordered" value="true" />
						<h:dataTable 
							id="extendedContentsList"
							var="item"
							value="#{editplaylist.extendedContents}"
							rowClasses="odd,even">
							
							<h:column>
								<f:facet name="header">
									<h:outputText value="#{messages['contents.my.title']}" />
								</f:facet>
									<ui:decorate template="/layout/displayContent.xhtml">
										<ui:param name="content" value="#{item}" />
									</ui:decorate>	
							</h:column>
							<h:column>
								<f:facet name="header">
									<h:outputText value="#{messages['contents.my.status']}" />
								</f:facet>
									<h:outputText value="#{item.status}" />
							</h:column>
							
							<h:column>
								<f:facet name="header">
									<h:outputText value="#{messages['contents.my.select']}" />
								</f:facet>
									<h:selectBooleanCheckbox value="#{item.select}" >
										<a4j:support event="onchange" action="#{editplaylist.addContentToPLaylist()}"/>
									</h:selectBooleanCheckbox>
							</h:column>
						</h:dataTable>
					</ui:decorate>	
					</a4j:outputPanel>
				</td>
			</tr>
		</table>
		<div width="100%" aling="right">
			<a4j:commandButton value="#{messages['playlists.edit.save']}" action="#{editplaylist.saveContent()}" disabled="true"></a4j:commandButton>
			<a4j:commandButton value="#{messages['playlists.edit.cancel']}" action="#{editplaylist.cancelContent()}"></a4j:commandButton>
		</div>
		</a4j:form>
	</ui:define>

</ui:composition>